<template>
  <div class="r-hospitalized">
    <div class="r-header">{{this.msg[0]}}</div>
    <ul class="right-cont">
      <li class="r-list"
          v-for="(item,index) in this.msg[1]"
          :key="index">
        <div class="r-count">{{item}}</div>
        <div class="r-del" @click = delPatient(item)>删除</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['msg'],
  data () {
    return {
      rightlist: []
    }
  },
  components: {},
  created () {
    console.log(this.msg)
  },
  methods: {
    delPatient (id) {
      this.$emit('delAll', id)
    }
  }
}
</script>

<style lang="stylus" scoped>
.r-hospitalized {
  height: 8.32rem;
  background-color: #fff;
  border-radius: 0.15rem;
  box-shadow: 0 0 0.1rem #e9edf2;
  padding: 0.2rem 0 0.2rem 0.2rem;

  .r-header {
    padding-left: 0.2rem;
    border-left: 3px solid #29b8ff;
    font-size: 0.3rem;
    color: #021233;
  }

  .right-cont {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .r-list {
      width: 1.05rem;
      margin-top: 0.3rem;
      margin-right: 0.26rem;

      .r-count {
        height: 0.7rem;
        line-height: 0.7rem;
        text-align: center;
        border: 1px solid #bfd0d8;
        border-radius: 0.15rem;
        color: #29b8ff;
        font-size: 0.38rem;
      }

      .r-del {
        height: 0.44rem;
        line-height: 0.44rem;
        text-align: center;
        background-color: #ffb049;
        border-radius: 0.1rem;
        margin-top: 0.1rem;
        color: #fff;
      }
    }
  }
}
</style>
